<script setup lang="ts">
import {RequestPath, startRequest, OperationalResponseData, OperationalItemData, CategroyResponseData, GoodsItemData, GoodsResponseData} from '../base/RequestWork'
import { onMounted, ref, onUnmounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

// 路由管理对象
let router = useRouter()

// 运营位数据 - 对应 Operational_Positions 表
let datas = ref<OperationalItemData[]>([])

// 快捷导航数据 - 固定的12个导航项
let navShortcuts = ref<Array<{icon: string, text: string, image?: string, link?: string}>>([
    { 
        icon: '📱', 
        text: '华为手机', 
        image: '/src/assets/1.png',
        link: '/phones'
    },
    { 
        icon: '🏃', 
        text: '运动健康', 
        image: '/src/assets/2.png',
        link: '/sports'
    },
    { 
        icon: '🎵', 
        text: '影音娱乐', 
        image: '/src/assets/3.png',
        link: '/entertainment'
    },
    { 
        icon: '💼', 
        text: '智慧办公', 
        image: '/src/assets/4.png',
        link: '/office'
    },
    { 
        icon: '🏠', 
        text: '鸿蒙智家', 
        image: '/src/assets/5.png',
        link: '/smart-home'
    },
    { 
        icon: '🛒', 
        text: '鸿蒙智选', 
        image: '/src/assets/6.png',
        link: '/harmony-select'
    },
    { 
        icon: '🚗', 
        text: '鸿蒙智行', 
        image: '/src/assets/7.png',
        link: '/smart-car'
    },
    { 
        icon: '🧭', 
        text: '乾崑智驾', 
        image: '/src/assets/8.png',
        link: '/smart-drive'
    },
    { 
        icon: '👩', 
        text: '她之选', 
        image: '/src/assets/9.png',
        link: '/for-her'
    },
    { 
        icon: '🏢', 
        text: '企业商用', 
        image: '/src/assets/10.png',
        link: '/business'
    },
    { 
        icon: '🔄', 
        text: '以旧换新', 
        image: '/src/assets/11.png',
        link: '/trade-in'
    },
    { 
        icon: '🔌', 
        text: '配件', 
        image: '/src/assets/12.png',
        link: '/accessories'
    }
])

// 热门活动数据 - 改为从商品类模块中获取
let activities = ref<GoodsItemData[]>([])

// 商品列表相关数据
let categoryList = ref<Array<{id: number, name: string, description?: string}>>([])
let categoryGoodsMap = ref<{[key: number]: GoodsItemData[]}>({}) // 存储每个分类的商品数据

// 返回顶部相关状态
let showBackToTop = ref(false)
let scrollTimer: number | null = null

// 计算属性：判断是否为前三个分类
const isFirstThreeCategories = computed(() => (index: number) => {
    return index < 3;
});

// Footer 相关数据
const footerServices = [
    { icon: 'Truck', title: '满99元包邮', desc: '全场满99元包邮' },
    { icon: 'Refresh', title: '7天无理由退货', desc: '购物无忧保障' },
    { icon: 'Shield', title: '100%正品保证', desc: '官方授权渠道' },
    { icon: 'Headset', title: '专业客服', desc: '7x24小时服务' }
]

const helpColumns = [
    {
        title: '购物指南',
        links: ['购物流程', '会员介绍', '常见问题', '联系客服']
    },
    {
        title: '配送方式',
        links: ['上门自提', '211限时达', '配送服务查询', '配送费收取标准']
    },
    {
        title: '支付方式',
        links: ['货到付款', '在线支付', '分期付款', '公司转账']
    },
    {
        title: '售后服务',
        links: ['售后政策', '价格保护', '退款说明', '返修/退换货']
    }
]

// 组件挂载时的生命周期函数
onMounted(()=>{
    // 请求运营位数据，只获取启用状态的运营位
    loadOperationalData()
    
    // 加载分类和商品数据
    loadCategory(()=>{
        // 为每个分类加载商品数据
        if (categoryList.value.length > 0) {
            categoryList.value.forEach(category => {
                loadGoodsForCategory(category.id)
            })
        }
    })
    
    // 添加滚动监听
    window.addEventListener('scroll', handleScroll)
})

// 组件卸载时清理
onUnmounted(() => {
    if (scrollTimer) {
        clearTimeout(scrollTimer)
    }
    window.removeEventListener('scroll', handleScroll)
})

// 处理滚动事件
function handleScroll() {
    // 使用防抖优化性能
    if (scrollTimer) {
        clearTimeout(scrollTimer)
    }
    
    scrollTimer = setTimeout(() => {
        // 当滚动超过 300px 时显示返回顶部按钮
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        showBackToTop.value = scrollTop > 300
    }, 100)
}

// 返回顶部功能
function smoothScrollToTop() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop > 0) {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
}

// 请求运营位数据 - 从 Operational_Positions 表获取
function loadOperationalData() {
    startRequest(RequestPath.operationalGet, 'get', {'status': 1}).then((response)=>{
        let data = response.data as OperationalResponseData
        datas.value = data.datas || []
    }).catch((error)=>{
        ElMessage.error({
            message: error.response?.data?.error || '运营位数据加载失败'
        })
    })
}

// 请求类别数据 - 从 Category 表获取
function loadCategory(cb:()=>void) {
    startRequest(RequestPath.categoryListGet, 'get', {}).then((response)=>{
        let data = response.data as CategroyResponseData
        categoryList.value = data.datas || []
        // 请求完成后，进行回调函数的执行
        cb()
        
        // 将分类数据存储到localStorage，供首页使用
        if (categoryList.value.length > 0) {
            localStorage.setItem('categoryList', JSON.stringify(categoryList.value))
        }
    }).catch((error)=>{
        ElMessage.error({
            message: error.response?.data?.error || '分类数据加载失败'
        })
        // 如果请求失败，设置一个默认分类
        categoryList.value = [
            { id: 0, name: '推荐', description: '为您推荐优质商品' }
        ]
        cb()
    })
}

// 为特定分类请求商品数据
function loadGoodsForCategory(cid: number) {
    startRequest(RequestPath.goodsListGet, 'get', {
        offset: 0,
        limit: 5, // 加载5个商品，1个用于主推，4个用于小商品
        cid
    }).then((response)=>{
        let data = response.data as GoodsResponseData
        // 将商品数据存储到对应分类的映射中
        categoryGoodsMap.value[cid] = data.datas || []
        
        // 当所有分类的商品数据加载完成后，设置热门活动数据
        updateActivitiesData()
    }).catch((error)=>{
        ElMessage.error({
            message: error.response?.data?.error || '商品数据加载失败'
        })
        // 请求失败时设置空数组
        categoryGoodsMap.value[cid] = []
        
        // 即使请求失败也尝试更新热门活动数据
        updateActivitiesData()
    })
}

// 更新热门活动数据 - 从商品类模块中各挑一个商品
function updateActivitiesData() {
    // 确保所有分类的商品数据都已加载
    if (categoryList.value.length === 0) return;
    
    const allGoods: GoodsItemData[] = [];
    
    // 收集所有分类的第一个商品
    categoryList.value.forEach(category => {
        if (categoryGoodsMap.value[category.id] && categoryGoodsMap.value[category.id].length > 0) {
            // 取每个分类的第一个商品
            allGoods.push(categoryGoodsMap.value[category.id][1]);
        }
    });
    
    // 如果收集到的商品数量不足4个，尝试从其他分类补充
    if (allGoods.length < 4) {
        categoryList.value.forEach(category => {
            if (categoryGoodsMap.value[category.id] && categoryGoodsMap.value[category.id].length > 1) {
                // 从第二个商品开始取，避免重复
                for (let i = 1; i < categoryGoodsMap.value[category.id].length; i++) {
                    if (allGoods.length >= 4) break;
                    allGoods.push(categoryGoodsMap.value[category.id][i]);
                }
            }
        });
    }
    
    // 取前4个商品作为热门活动数据
    activities.value = allGoods.slice(0, 4);
}

// 点击某个运营位的方法
function clickItem(item: OperationalItemData) {
    if (item.uri) {
        router.push({
            path: '/home' + item.uri
        })
    }
}

// 导航项点击事件
function navItemClick(item: any) {
    if (item.link) {
        // 跳转到对应页面
        router.push({
            path: item.link
        })
    } else {
        // 如果没有设置link，使用默认行为
        console.log('导航项点击:', item.text)
    }
}

// 活动项点击事件 - 修改为跳转到商品详情页
function activityClick(item: GoodsItemData) {
    // 修改为跳转到商品详情页，与商品列表区域的跳转逻辑保持一致
    goDetail(item)
}

// 跳转到商品详情页
function goDetail(item: GoodsItemData) {
    if (item.id) {
        router.push({
            name: 'goodsDetail',
            params: {id: item.id}
        })
    }
}

// 立即购买按钮点击 - 修改为跳转到商品详情页
// function buyNow(item: GoodsItemData) {
//     goDetail(item)
// }

// 点击更多按钮
function viewMore(category: any) {
    console.log('查看更多:', category.name)
    // 这里可以实现跳转到分类页面的逻辑
}

// 跳转到购物车的方法
function goShopCar() {
    router.push({
        name: 'shopCar'
    })
}
</script>

<template>
   
    <div class="vmall-main">
        <!-- 轮播组件 - 修改为可视宽度大小 -->
        <div class="vmall-carousel-container">
            <el-carousel indicator-position="outside" height="auto" v-if="datas && datas.length > 0" class="vmall-carousel-viewport">
                <el-carousel-item v-for="item in datas" :key="item.id" style="height: 400px">
                    <div class="vmall-carousel-item" @click="clickItem(item)">
                        <el-image style="width: 100%; height: 400px;" :src="item.cover" fit="fill"/>
                        <div class="vmall-carousel-content">
                            {{ item.content }}
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 轮播下方导航 - 改为固定的12个导航项 -->
        <div class="vmall-nav-shortcuts">
            <div class="vmall-nav-grid">
                <!-- 第一行：6个导航项 -->
                <div class="vmall-nav-row">
                    <div 
                        class="vmall-nav-item" 
                        v-for="item in navShortcuts.slice(0, 6)" 
                        :key="item.text"
                        @click="navItemClick(item)"
                    >
                        <div class="vmall-nav-image">
                            <el-image 
                                style="width: 60px; height: 60px;" 
                                :src="item.image" 
                                fit="cover"
                                :preview-src-list="[item.image]"
                                :preview-teleported="true"
                            >
                                <template #error>
                                    <div class="vmall-nav-icon">{{ item.icon }}</div>
                                </template>
                            </el-image>
                        </div>
                        <div class="vmall-nav-text">{{ item.text }}</div>
                    </div>
                </div>
                <!-- 第二行：6个导航项 -->
                <div class="vmall-nav-row">
                    <div 
                        class="vmall-nav-item" 
                        v-for="item in navShortcuts.slice(6, 12)" 
                        :key="item.text"
                        @click="navItemClick(item)"
                    >
                        <div class="vmall-nav-image">
                            <el-image 
                                style="width: 60px; height: 60px;" 
                                :src="item.image" 
                                fit="cover"
                                :preview-src-list="[item.image]"
                                :preview-teleported="true"
                            >
                                <template #error>
                                    <div class="vmall-nav-icon">{{ item.icon }}</div>
                                </template>
                            </el-image>
                        </div>
                        <div class="vmall-nav-text">{{ item.text }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门活动 - 修改为从商品类模块中获取的商品数据 -->
        <div class="vmall-section">
            <div class="vmall-activities">
                <div class="vmall-activity-product" 
                     v-for="item in activities" 
                     :key="item.id" 
                     @click="activityClick(item)">
                    <!-- 上部分：商品图片 -->
                    <div class="vmall-product-image">
                        <div class="vmall-image-placeholder">
                            <el-image 
                                style="width: 100%; height: 100%;" 
                                :src="item.image" 
                                fit="cover"
                                :preview-src-list="[item.image]"
                                :preview-teleported="true"
                            >
                                <template #error>
                                    <div class="vmall-image-fallback">商品图片</div>
                                </template>
                            </el-image>
                        </div>
                    </div>
                    
                    <!-- 下部分：商品信息 -->
                    <div class="vmall-product-info">
                        <div class="vmall-product-name">{{ item.name }}</div>
                        <div class="vmall-product-desc">{{ item.description }}</div>
                        <div class="vmall-product-price">￥{{ item.discounted_price }}</div>
                    </div>
                </div>
            </div>
        </div>

        
       <!-- 新人有礼福利专区，左右结构 -->
        <div class="vmall-section" style="background-color: #fff;">
            <img src="../assets/18.png" alt="" style="width: 100%;">
        </div>

        <!-- 商品列表区域 - 重新设计为分类区块 -->
        <div class="vmall-categories-container">
            <!-- 每个分类作为一个独立区块，添加ID用于定位 -->
            <div class="vmall-category-block" 
                 v-for="(category, index) in categoryList" 
                 :key="category.id"
                 :id="`category-${category.id}`"
                 :class="{ 'vmall-category-simple': !isFirstThreeCategories(index) }">
                
                <!-- 分类区块header - 所有分类都显示 -->
                <div class="vmall-category-header">
                    <h3 class="vmall-category-title">{{ category.name }}</h3>
                    <div class="vmall-category-more" @click="viewMore(category)">
                        更多 >
                    </div>
                </div>
                
                <!-- 上部分：主推商品 - 改为背景图片布局（仅前三个分类显示） -->
                <div class="vmall-featured-product-bg" 
                     v-if="isFirstThreeCategories(index) && categoryGoodsMap[category.id] && categoryGoodsMap[category.id].length > 0"
                     :style="{ backgroundImage: `url(${categoryGoodsMap[category.id][0].image})` }"
                     @click="goDetail(categoryGoodsMap[category.id][0])">
                    <div class="vmall-featured-overlay">
                        <div class="vmall-featured-content-bg">
                            <div class="vmall-featured-name-bg">{{ categoryGoodsMap[category.id][0].name }}</div>
                            <div class="vmall-featured-desc-bg">{{ categoryGoodsMap[category.id][0].description }}</div>
                            <div class="vmall-featured-price-bg">￥{{ categoryGoodsMap[category.id][0].discounted_price }}</div>
                            <button class="vmall-buy-now-btn-bg" @click.stop="goDetail(categoryGoodsMap[category.id][0])">立即购买</button>
                        </div>
                    </div>
                </div>
                
                <!-- 下部分：4个小商品 - 改为热门活动样式（所有分类都显示） -->
                <div class="vmall-sub-products" v-if="categoryGoodsMap[category.id] && categoryGoodsMap[category.id].length > (isFirstThreeCategories(index) ? 1 : 0)">
                    <div class="vmall-sub-activities">
                        <div class="vmall-activity-product" 
                             v-for="(item, itemIndex) in categoryGoodsMap[category.id].slice(isFirstThreeCategories(index) ? 1 : 0, isFirstThreeCategories(index) ? 5 : 4)" 
                             :key="itemIndex"
                             @click="goDetail(item)">
                            <!-- 上部分：商品图片 -->
                            <div class="vmall-product-image">
                                <div class="vmall-image-placeholder">
                                    <el-image 
                                        style="width: 100%; height: 100%;" 
                                        :src="item.image" 
                                        fit="cover"
                                        :preview-src-list="[item.image]"
                                        :preview-teleported="true"
                                    >
                                        <template #error>
                                            <div class="vmall-image-fallback">商品图片</div>
                                        </template>
                                    </el-image>
                                </div>
                            </div>
                            
                            <!-- 下部分：商品信息 -->
                            <div class="vmall-product-info">
                                <div class="vmall-product-name">{{ item.name }}</div>
                                <div class="vmall-product-desc">{{ item.description }}</div>
                                <div class="vmall-product-price">￥{{ item.discounted_price }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 空状态显示 -->
                <div class="vmall-empty-category" v-if="!categoryGoodsMap[category.id] || categoryGoodsMap[category.id].length === 0">
                    <div class="vmall-empty-text">暂无商品</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 简洁版Footer -->
    <footer class="vmall-footer">
        <div class="footer-container">
            <!-- 服务保障 -->
            <div class="footer-services">
                <div class="service-item" v-for="service in footerServices" :key="service.title">
                    <el-icon :size="24"><component :is="service.icon" /></el-icon>
                    <div class="service-info">
                        <div class="service-title">{{ service.title }}</div>
                        <div class="service-desc">{{ service.desc }}</div>
                    </div>
                </div>
            </div>

            <!-- 帮助链接 -->
            <div class="footer-links">
                <div class="link-column" v-for="column in helpColumns" :key="column.title">
                    <h4>{{ column.title }}</h4>
                    <ul>
                        <li v-for="link in column.links" :key="link">
                            <a href="#">{{ link }}</a>
                        </li>
                    </ul>
                </div>
                <div class="link-column contact-column">
                    <h4>联系我们</h4>
                    <p class="contact-phone">950805</p>
                    <p class="contact-desc">7x24小时客服热线</p>
                    <div class="contact-buttons">
                        <el-button size="small">在线客服</el-button>
                        <el-button size="small" type="primary">反馈建议</el-button>
                    </div>
                </div>
            </div>

            <!-- 版权信息 -->
            <div class="footer-bottom">
                <div class="bottom-links">
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">隐私政策</a>
                    <span>|</span>
                    <a href="#">服务协议</a>
                    <span>|</span>
                    <a href="#">知识产权</a>
                    <span>|</span>
                    <a href="#">法律声明</a>
                </div>
                <div class="copyright">
                    <p>Copyright © 2025 ApexStore 版权所有</p>
                    <p>增值电信业务经营许可证：粤B2-20200000 | 粤公网安备 440300000000号</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 整合的侧边工具栏 -->
    <div class="vmall-side-tools">
        <div class="tool-item" @click="goShopCar">
            <el-icon :size="20"><ShoppingCart /></el-icon>
            <span class="tool-text">购物车</span>
        </div>
        <div class="tool-divider"></div>
        <div 
            class="tool-item" 
            :class="{ 'disabled': !showBackToTop }"
            @click="showBackToTop ? smoothScrollToTop() : null"
        >
            <el-icon :size="20"><Top /></el-icon>
            <span class="tool-text">返回顶部</span>
        </div>
    </div>
</template>

<style>
/* 华为商城风格样式 */
:root {
    --vmall-primary: #e02020;
    --vmall-primary-hover: #c61818;
    --vmall-text-primary: #333;
    --vmall-text-secondary: #666;
    --vmall-text-light: #999;
    --vmall-bg-light: #f5f5f5;
    --vmall-border: #e5e5e5;
}

.vmall-main {
    width: 100%;
    min-width: 850px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: transparent;
    overflow: visible !important;
    position: relative;
}

/* 轮播图容器 - 新增样式 */
.vmall-carousel-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* 轮播图可视宽度样式 */
.vmall-carousel-viewport {
    width: 100% !important;
    margin: 0 auto;
    border-radius: 0 !important;
    position: relative;
    left: 0;
    right: 0;
}

.vmall-carousel-viewport .el-carousel__container {
    border-radius: 0 !important;
    width: 100% !important;
}

.vmall-carousel-viewport .el-carousel__item {
    border-radius: 0 !important;
}

.vmall-carousel-item {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 0 !important;
    width: 100% !important;
}

.vmall-carousel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: white;
    font-size: 18px;
    font-weight: 500;
}

/* 快捷导航 - 改为网格布局 */
.vmall-nav-shortcuts {
    background: transparent;
    margin-top: 20px;
    padding: 20px 0;
    overflow: visible;
}

.vmall-nav-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: visible;
}

.vmall-nav-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    overflow: visible;
}

.vmall-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    position: relative;
    overflow: visible;
}

.vmall-nav-item:hover {
    transform: translateY(-3px);
    border-color: var(--vmall-primary);
}

.vmall-nav-image {
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.vmall-nav-icon {
    font-size: 28px;
}

.vmall-nav-text {
    font-size: 14px;
    color: var(--vmall-text-primary);
    font-weight: 500;
    line-height: 1.2;
}

/* 通用区块样式 - 修改背景为透明 */
.vmall-section {
    margin: 30px 0;
    background: transparent;
    overflow: visible;
    position: relative;
}

/* 热门活动区块 - 修改为4个商品展示块，宽度25% */
.vmall-activities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    overflow: visible;
}

.vmall-activity-product {
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    position: relative;
}

.vmall-activity-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: var(--vmall-primary);
}

/* 商品图片部分 */
.vmall-product-image {
    padding: 15px;
    background: #fafafa;
    border-bottom: 1px solid var(--vmall-border);
    overflow: hidden;
}

.vmall-image-placeholder {
    width: 100%;
    height: 180px;
    border-radius: 6px;
    overflow: hidden;
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmall-image-fallback {
    color: var(--vmall-text-light);
    font-size: 14px;
}

/* 商品信息部分 */
.vmall-product-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow: visible;
}

.vmall-product-name {
    font-size: 20px;
    color: var(--vmall-text-primary);
    font-weight: 450;
    line-height: 1.4;
}

.vmall-product-desc {
    font-size: 14px;
    color: var(--vmall-text-secondary);
    line-height: 1.4;
    margin: 0px 0px 40px;
}

.vmall-product-price {
    font-size: 17px;
    margin-top: auto;
}

/* 重新设计的商品列表区域 */
.vmall-categories-container {
    background: transparent;
    margin: 30px 0;
    overflow: visible !important;
    position: relative;
}

.vmall-category-block {
    background: transparent;
    margin-bottom: 40px;
    scroll-margin-top: 120px;
    overflow: visible !important;
    position: relative;
}

/* 分类区块header */
.vmall-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--vmall-primary);
    overflow: visible;
}

.vmall-category-title {
    font-size: 22px;
    color: var(--vmall-text-primary);
    font-weight: 600;
    margin: 0;
}

.vmall-category-more {
    color: var(--vmall-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s;
}

.vmall-category-more:hover {
    color: var(--vmall-primary);
}

/* 主推商品样式 - 改为背景图片布局 */
.vmall-featured-product-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    height: 400px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.vmall-featured-product-bg:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.vmall-featured-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.vmall-featured-content-bg {
    max-width: 50%;
    padding-left: 20px;
}

.vmall-featured-name-bg {
    font-size: 34px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.vmall-featured-desc-bg {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 1.5;
    color: #666;
    opacity: 0.9;
}

.vmall-featured-price-bg {
    font-size: 18px;
    margin: 40px 0px 55px;
}

.vmall-buy-now-btn-bg {
    background-color: black;
    color: white;
    border: none;
    padding: 13px 30px;
    border-radius: 35px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.vmall-buy-now-btn-bg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 小商品轮播区域 - 改为热门活动样式 */
.vmall-sub-products {
    background: transparent;
    padding: 20px 0;
    overflow: visible;
}

.vmall-sub-activities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    overflow: visible;
}

/* 空状态样式 */
.vmall-empty-category {
    background: white;
    border-radius: 8px;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: visible;
}

.vmall-empty-text {
    color: var(--vmall-text-light);
    font-size: 16px;
}

/* 简洁版Footer样式 */
.vmall-footer {
 width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background: #f8f8f8;
    border-top: 1px solid #e8e8e8;
    margin-top: 60px;
    font-size: 14px;
    color: #666;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 20px;
}

/* 服务保障区域 */
.footer-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 30px 0;
    border-bottom: 1px solid #e8e8e8;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-item .el-icon {
    color: var(--vmall-primary);
    flex-shrink: 0;
}

.service-info {
    flex: 1;
}

.service-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.service-desc {
    font-size: 12px;
    color: #999;
}

/* 帮助链接区域 */
.footer-links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 90px;
    padding: 40px;
    border-bottom: 1px solid #e8e8e8;
}

.link-column h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.link-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.link-column li {
    margin-bottom: 8px;
}

.link-column a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 14px;
}

.link-column a:hover {
    color: var(--vmall-primary);
}

.contact-column .contact-phone {
    font-size: 24px;
    font-weight: 700;
    color: var(--vmall-primary);
    margin: 8px 0 4px;
}

.contact-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.contact-buttons {
    display: flex;
    gap: 8px;
}

.contact-buttons .el-button {
    border-radius: 4px;
}

/* 底部版权信息 */
.footer-bottom {
    padding: 20px 0 0;
    text-align: center;
}

.bottom-links {
    margin-bottom: 16px;
}

.bottom-links a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.3s;
}

.bottom-links a:hover {
    color: var(--vmall-primary);
}

.bottom-links span {
    color: #ddd;
    margin: 0 12px;
}

.copyright {
    color: #999;
    font-size: 12px;
    line-height: 1.6;
}

.copyright p {
    margin: 4px 0;
}

/* 整合的侧边工具栏 */
.vmall-side-tools {
    position: fixed;
    right: 10px;
    bottom: 100px;
    width: 80px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.3s;
    background: white;
}

.tool-item:hover {
    background: #f9f9f9;
}

.tool-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tool-item.disabled:hover {
    background: white;
}

.tool-item .el-icon {
    color: #666;
    margin-bottom: 6px;
}

.tool-text {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.2;
}

.tool-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 0 8px;
}

/* 响应式设计 */
@media (max-width: 1220px) {
    .vmall-carousel-item,
    .vmall-carousel-item .el-image {
        height: 350px !important;
    }
    
    .vmall-activities {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .vmall-nav-row {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }
    
    .vmall-nav-item {
        padding: 15px 8px;
    }
    
    .vmall-nav-image {
        width: 50px;
        height: 50px;
    }
    
    .vmall-nav-text {
        font-size: 13px;
    }
    
    .vmall-sub-activities {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .vmall-featured-name-bg {
        font-size: 28px;
    }
    
    .vmall-featured-desc-bg {
        font-size: 16px;
    }
    
    .vmall-featured-price-bg {
        font-size: 32px;
    }
    
    .footer-services {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .vmall-side-tools {
        right: 20px;
        bottom: 80px;
    }
}

@media (max-width: 1024px) {
    .vmall-carousel-item,
    .vmall-carousel-item .el-image {
        height: 300px !important;
    }
    
    .vmall-activities {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vmall-nav-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .vmall-nav-shortcuts {
        padding: 15px 0;
    }
    
    .vmall-sub-activities {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vmall-featured-product-bg {
        height: 350px;
    }
    
    .vmall-featured-name-bg {
        font-size: 24px;
    }
    
    .vmall-featured-desc-bg {
        font-size: 14px;
    }
    
    .vmall-featured-price-bg {
        font-size: 28px;
    }
    
    .vmall-buy-now-btn-bg {
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vmall-side-tools {
        right: 15px;
        bottom: 70px;
        width: 70px;
    }
}

@media (max-width: 768px) {
    .vmall-nav-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vmall-categories-container {
        padding: 20px 15px;
    }
    
    .vmall-category-block {
        padding: 15px;
        scroll-margin-top: 100px;
    }
    
    .vmall-featured-product-bg {
        height: 250px;
    }
    
    .vmall-featured-content-bg {
        max-width: 80%;
    }
    
    .vmall-featured-name-bg {
        font-size: 18px;
    }
    
    .vmall-featured-price-bg {
        font-size: 20px;
    }
    
    .footer-services {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .vmall-side-tools {
        right: 10px;
        bottom: 60px;
        width: 60px;
    }
    
    .tool-item {
        padding: 12px 6px;
    }
    
    .tool-item .el-icon {
        font-size: 18px;
    }
    
    .tool-text {
        font-size: 11px;
    }
}
</style>